import {getCategory} from '../../service/config/index.js'
let col1H = 0; //列1 的高度
let col2H = 0; //列2 的高度
const BACKTOPDIS=500;

/**
 * 封装的瀑布流插件
 */
Page({
  /**
   * 页面的初始数据
   */
  data: {
    navTab:[], //顶部导航
    isFiexd:false,
    scrollH: 0,
    imgWidth: 0,
    loadingCount: 0,
    images: [],
    col1: [],
    col2: []
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that = this
    that._getCategory()

    wx.getSystemInfo({
      success: (res) => {
          let ww = res.windowWidth;
          let wh = res.windowHeight;
          let imgWidth = ww * 0.48;
          let scrollH = wh;
          
          this.setData({
              scrollH: scrollH,
              imgWidth: imgWidth
          });
          this.loadImages();
      }
  })
  },

  onImageLoad: function (e) {
      let imageId = e.currentTarget.id;
      let oImgW = e.detail.width;         //图片原始宽度
      let oImgH = e.detail.height;        //图片原始高度
      let imgWidth = this.data.imgWidth;  //图片设置的宽度
      let scale = imgWidth / oImgW;       //比例计算
      let imgHeight = oImgH * scale;      //自适应高度

      let images = this.data.images;
      let imageObj = null;

      for (let i = 0; i < images.length; i++) {
          let img = images[i];
          if (img.id === imageId) {
              imageObj = img;
              break;
          }
      }

      imageObj.height = imgHeight;

      let loadingCount = this.data.loadingCount - 1;
      let col1 = this.data.col1;
      let col2 = this.data.col2;

      if (col1H <= col2H) {
          col1H += imgHeight;
          col1.push(imageObj);
      } else {
          col2H += imgHeight;
          col2.push(imageObj);
      }

      let data = {
          loadingCount: loadingCount,
          col1: col1,
          col2: col2
      };

      if (!loadingCount) {
          data.images = [];
      }

      this.setData(data);
  },

  //获取顶部导航
  _getCategory(){
    let that = this;
    let param = {}
    param.type = 2
    getCategory(param).then(res=>{
      let nav = res.data
      let arr = []
      for (const iter of nav) {
        arr.push(iter.name)
      }
      that.setData({
        navTab:arr,
      })
    })
  },

  loadImages: function () {
    console.log("触底")
      let images = [
          { pic: "https://img.win3000.com/m00/63/3a/fecac85e7571ded754fb5edd93d7cb0c.jpg", height: 0 },
          { pic: "https://img.win3000.com/m00/63/3a/fecac85e7571ded754fb5edd93d7cb0c.jpg", height: 0 },
          { pic: "https://img.win3000.com/m00/07/c3/f830f67f1c375b1170f66a8033719d7a.jpg", height: 0 },
          { pic: "https://img.win3000.com/m00/07/c3/f830f67f1c375b1170f66a8033719d7a.jpg", height: 0 },
          { pic: "https://img.win3000.com/m00/63/3a/fecac85e7571ded754fb5edd93d7cb0c.jpg", height: 0 },
          { pic: "https://img.win3000.com/m00/07/c3/f830f67f1c375b1170f66a8033719d7a.jpg", height: 0 },
          { pic: "https://img.win3000.com/m00/63/3a/fecac85e7571ded754fb5edd93d7cb0c.jpg", height: 0 },
          { pic: "https://img.win3000.com/m00/07/c3/f830f67f1c375b1170f66a8033719d7a.jpg", height: 0 },
          { pic: "https://img.win3000.com/m00/63/3a/fecac85e7571ded754fb5edd93d7cb0c.jpg", height: 0 },
          { pic: "https://img.win3000.com/m00/63/3a/fecac85e7571ded754fb5edd93d7cb0c.jpg", height: 0 },
          { pic: "https://img.win3000.com/m00/07/c3/f830f67f1c375b1170f66a8033719d7a.jpg", height: 0 },
          { pic: "https://img.win3000.com/m00/63/3a/fecac85e7571ded754fb5edd93d7cb0c.jpg", height: 0 },
          { pic: "https://img.win3000.com/m00/63/3a/fecac85e7571ded754fb5edd93d7cb0c.jpg", height: 0 },
          { pic: "https://img.win3000.com/m00/63/3a/fecac85e7571ded754fb5edd93d7cb0c.jpg", height: 0 }
      ];

      let baseId = "img-" + (+new Date());

      for (let i = 0; i < images.length; i++) {
          images[i].id = baseId + "-" + i;
      }

      
      this.setData({
          loadingCount: images.length,
          images: images
      });
  },
  tabclick(event){
    const index= event.detail.index;
    console.log(index)
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  onPageScroll: function(options){
    const scrollTop = options.scrollTop;
    console.log(scrollTop)
    //回到顶部
    const flag=scrollTop >=BACKTOPDIS
    //官方提示，不建议在onPageScroll 频繁的调用this.setData方法
    //因为会不断的刷新界面
    if(flag!=this.data.showBacktop){
      this.setData({
        showBacktop:flag
      })
    }
 
    //tabcontrol停留效果
    const flag2=scrollTop>=this.data.tabScrollTop;
    if(flag2!=this.data.isFiexd){
      this.setData({
        isFiexd:flag2
      })
    }
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})